<template lang="jade">
  table.table
    thead
      tr
        th(v-for='c in colums', :style="{ width: c.width + 'pt' }",:class="c.class") {{c.title}}
    tbody
      tr(v-for='td in tableData')
        td(v-for='c in colums', :class="c.class")
          span(v-if='c.template', v-for='t in c.template')
            span.team-sort(v-if="t.type === 'team_sort'") [{{td[c.data].sort}}]
            span(v-if="t.type === 'team_name'") {{td[c.data].name}}
            span(v-if="t.type === 'result'", :class="resultColor(td[c.data])") {{td[c.data]}}
            button.table-btn(v-if="t.type === 'button'") {{t.name}}
          span(v-if='!c.template') {{td[c.data]}}
</template>

<style lang="less" scoped>
  
  .table {
    width: 100%;
    border-collapse:collapse;
    font-size: 10pt;
    &-btn{
      border: 1pt solid #808080;
      font-size: 10pt;
      padding: 3px 8px;
      color: #fff;
      background: transparent;
      margin: 0 6pt;
      &:hover{
        background: #9A9DA2;
        border-color: #9A9DA2;
      }
    }
  }

  .table td, .table th {
    color: #fff;
  }
  .table tr{
    border-top: 5pt solid #292C31;
    border-bottom: 5pt solid #292C31;
    height: 34pt;
    box-sizing: border-box;
  }
  .table tr:nth-child(even) {
    background: #1E2024;
  }
  .table tr:nth-child(odd) {
    background: #23262A;
  }
  .team-sort{
    font-size: 8pt;
    color: #808080;
    padding: 3pt;
  }
  .home-win{
    color: #F34141;
  }
  .guest-win{
    color: #0CB2E2;
  }
  .non-win{
    color: #E6E6E6;
  }
</style>

<script>

  export default {
    props: {
        'colums': {
            type: Array,
            required: true
        },
        'tableData': {
            type: Array
        }
    },
    data() {
      return {

      }
    },
    computed: {

    },
    created() {
      let self = this
      
    },
    mounted() {
      let self = this

    },

    methods: {
      resultColor(result) {
        let self = this
        let classname = 'win'
        switch(result) {
          case '主':
            classname = 'home-win'
            break
          case '客':
            classname = 'guest-win'
            break 
          case '平':
            classname = 'non-win'
            break 
          default:
            break
        }
        return classname
      }
    },

    components: {
      
    }
  }
</script>